<template>
  <!-- 文章详情页 -->
  <div v-if="detaObj" class="container">
    <!-- 1.普通文章 -->
    <div class="ordinary" v-if="detaObj&&detaObj.type==1">
      <!-- 1-1  NEW容器 -->
      <div class="NewBox">
        <div class="left">
          <!-- 左箭头 -->
          <span class="iconfont iconjiantou2" @click="$router.back()"></span>
          <!-- NEW字体图标 -->
          <span class="iconfont iconnew"></span>
        </div>
        <!-- 关注 -->
        <div class="right">
          <!-- v-if和v-else判断显示哪个按钮 -->
          <button @click="delatten(detaObj.user.id)" class="atten" v-if="detaObj.has_follow">已关注</button>
          <button @click="atten(detaObj.user.id)" class="notatten" v-else>关注</button>
        </div>
      </div>
      <!-- 1-2  标题 -->
      <div class="title">{{detaObj.title}}</div>
      <!-- 1-3  昵称和时间 -->
      <div class="nickName">
        <span class="spanpadd">{{detaObj.user.nickname}}</span>
        <span>{{detaObj.create_date.split('T')[0]}}</span>
      </div>
      <!-- 1-4  内容 -->
      <div class="content" v-html="detaObj.content"></div>
    </div>
    <!-- 2.视频文章 -->
    <div class="videoBox" v-else>
      <!-- 视频 -->
      <video
        ref="shipin"
        class="player"
        poster="https://timgmb04.bdimg.com/timg?searchbox_feed&quality=100&wh_rate=0&size=b576_324&ref=http%3A%2F%2Fwww.baidu.com&sec=1568739067&di=612dd27cae470b93b01a4b32ef72fbac&src=http%3A%2F%2Fpic.rmb.bdstatic.com%2Fe18c6ffa079441431f8988ca4c3ac106.jpeg"
        controls
        src="https://video.pearvideo.com/mp4/third/20200627/cont-1682419-15488237-095726-hd.mp4"
      ></video>
      <!-- 播放按钮 -->
      <button class="btn" v-if="isShow" @click="plays">
        <span class="iconfont iconshipin"></span>
      </button>
      <!-- 暂停按钮 -->
      <button class="btn" v-if="!isShow" @click="plays">
        <span class="iconfont iconicon-test"></span>
      </button>
      <!-- info -->
      <div v-if="detaObj" class="info">
        <div class="left">
          <img :src="img" alt />
          <span>{{nickname}}</span>
        </div>
        <div class="right">关注</div>
      </div>
      <div class="title">{{detaObj.title}}</div>
    </div>
    <!-- 3.底部（点赞和微信容器） -->
    <div class="weixinBox">
      <div class="left" @click="getGive">
        <span :class="give?'green':''" class="iconfont icondianzan"></span>
        {{detaObj.like_length}}
      </div>
      <div class="right">
        <span class="iconfont iconweixin"></span>微信
      </div>
    </div>

    <!-- 4.评论列表页（只显示3条评论，要看全部得到另一个comment页面看） -->
    <div class="comment">
      <!-- 4-1 精彩跟帖 -->
      <div class="reply">精彩跟帖</div>
      <!-- 4-2 递归父组件 -->
      <comment
        @callReply="callReply"
        class="btnt"
        :commentData="item"
        v-for="(item,index) in list"
        :key="index"
      ></comment>
      <!-- 4-3 更多跟帖按钮 -->
      <div class="more">
        <button @click="$router.push('/comment/'+$route.params.id)">更多跟帖</button>
      </div>
      <!-- 4-4 评论输入框 -->
      <commentInput @reloadComment="loadComment" ref="commentInput" :parentInfo="commentInfo"></commentInput>
    </div>
  </div>
</template>

<script>
//引入递归组件A
import comment from "../components/recursion/comment";
//引入输入框组件 commentInput
import commentInput from "../components/commentInput";

export default {
  //挂载组件
  components: {
    comment,
    commentInput
  },
  //创建vue成功后执行
  created() {
    console.log("this.$route.params.id");

    console.log(this.$route.params.id);

    //发起详情页面请求，获取数据
    this.$axios({
      url: "/post/" + this.$route.params.id
    }).then(res => {
      console.log(res.data);
      //数据存储  详情对象
      this.detaObj = res.data.data;
      1;
      //存储昵称
      this.nickname = res.data.data.user.nickname;
      //存储小图像
      this.img = "http://127.0.0.1:3000" + res.data.data.user.head_img;
    });

    //发起post_comment请求
    this.loadComment();
  },
  //数据
  data() {
    return {
      //详情对象
      detaObj: {},
      //判断显示播放按钮和停止按钮
      isShow: true,
      //昵称
      nickname: "",
      //头像
      img: "",
      //点赞
      give: true,
      //评论递归数组
      list: [],
      //评论id
      commentInfo: {}
    };
  },
  //函数
  methods: {
    //点击播放图标，播放视频
    plays() {
      const shipin = this.$refs.shipin;
      if (this.isShow) {
        shipin.play();
        this.isShow = false;
      } else {
        shipin.pause();
        this.isShow = true;
      }
    },
    //已关注，点击取消关注
    delatten(id) {
      console.log("取消关注");
      //发起取消关注请求
      this.$axios({
        url: "/user_unfollow/" + id
      }).then(res => {
        console.log(res.data);
      });
      //取消关注，显示关注按钮
      this.detaObj.has_follow = false;
      console.log(this.detaObj.has_follow);
    },
    //关注，点击后关注
    atten(id) {
      console.log("关注");
      //发起关注请求
      this.$axios({
        url: "/user_follows/" + id
      }).then(res => {
        console.log(res.data);
      });
      //关注成功，显示取消关注按钮
      this.detaObj.has_follow = true;
      console.log(this.detaObj.has_follow);
    },
    //点赞函数
    getGive() {
      this.$axios({
        url: "/post_like/" + this.detaObj.id
      }).then(res => {
        console.log(res.data);
        //点赞成功
        if (res.data.message == "点赞成功") {
          console.log("点赞成功");
          this.detaObj.like_length += 1;
          this.give = true;
        } else {
          console.log("取消点赞");
          //
          this.detaObj.like_length -= 1;
          this.give = !this.give;
        }
      });
    },
    //子传父数据存储
    callReply(commentInfo) {
      //1.将id存起来交给输入框组件
      this.commentInfo = commentInfo;
      console.log("获取到数据了");
      console.log(this.commentInfo);

      //2.显示输入框，调用commentInput子组件的 showTextarea函数
      this.$refs.commentInput.showTextarea();
    },
    //页面刷新
    loadComment() {
      //一创键成功就发axios
      this.$axios({
        url: "/post_comment/" + this.$route.params.id
      }).then(res => {
        console.log(res.data);
        //获取数据，将得到的数据存储到data
        //改造数据

        const arr = res.data.data;
        //当arr评论的长度大于3时，只显示是3条评论
        if (arr.length > 3) {
          arr.length = 3;
        }
        this.list = arr;
        this.commentInfo = {};
      });
    }
  }
};
</script>

<style lang="less" scoped>
//大容器
.container {
  //1.普通容器
  .ordinary {
    padding: 1.667vw 4.444vw;

    //1.NEW容器
    .NewBox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        .iconjiantou2 {
          padding-right: 2.778vw;
          font-style: 4.444vw;
        }
        .iconnew {
          font-size: 16.667vw;
        }
      }
      //右边，关注盒子1
      .right {
        button {
          padding: 6px 4.444vw;
          border-radius: 6.667vw;
          font-size: 3.889vw;
          border: 1px solid #ccc;
          background: #fff;
        }
        .atten {
          font-weight: 700;
          color: white;
          background: rosybrown;
        }
        .notatten {
          color: steelblue;
          background: seashell;
        }
      }
    }
    //2.标题
    .title {
      font-size: 4.444vw;
      color: #333;
      font-weight: 700;
    }
    //3.昵称和时间
    .nickName {
      font-size: 3.889vw;
      color: #888;
      padding: 1.667vw 0 4.444vw;
      //昵称span，给边距
      .spanpadd {
        padding-right: 5.556vw;
      }
    }
    //4.文章内容
    .content {
      width: 100vw;
      font-size: 3.889vw;
      color: #333;
      /deep/ img {
        max-width: 100%;
      }
    }
  }
  //2.视频容器
  .videoBox {
    position: relative;
    padding: 1.667vw 4.444vw;
    .player {
      width: 100%;
    }
    //定位的按钮
    .btn {
      position: absolute;
      top: 16.667vw;
      left: 43.056vw;
      width: 16.667vw;
      height: 16.667vw;
      border-radius: 50%;
      border: none;
      background: rgba(0, 0, 0, 0.1);
      .iconshipin {
        color: white;
        font-size: 11.111vw;
      }
      .iconicon-test {
        opacity: 0.3;
        color: tomato;
        font-size: 11.111vw;
      }
    }
    .info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        font-size: 3.889vw;
        color: #888;
        padding: 1.667vw 0 4.444vw;
        display: flex;
        align-items: center;
        img {
          width: 7.222vw;
          height: 7.222vw;
          border-radius: 50%;
          padding-right: 2.778vw;
        }
      }
      .right {
        padding: 1.667vw 4.444vw;
        border-radius: 6.667vw;
        font-size: 3.889vw;
        border: 1px solid #ccc;
        background: #fff;
      }
    }
    .title {
      font-size: 4.444vw;
      color: #333;
      font-weight: 700;
    }
  }
  //3.微信容器
  .weixinBox {
    padding: 7.778vw 0 5.556vw;
    border-bottom: 1.389vw solid #e4e4e4;
    display: flex;
    justify-content: center;
    .left {
      margin-right: 16.667vw;
      padding: 1.111vw 4.444vw;
      border-radius: 5vw;
      border: 1px solid #ccc;
      font-size: 3.889vw;
      .icondianzan {
        padding-right: 2.778vw;
        font-size: 5vw;
      }
      .green {
        font-size: 18px;
        color: green;
        font-weight: 700;
      }
    }
    .right {
      padding: 4px 4.444vw;
      border-radius: 5vw;
      border: 1px solid #ccc;
      font-size: 3.889vw;
      .iconweixin {
        padding-right: 2.778vw;
        font-size: 5vw;
        color: #0fca0f;
      }
    }
  }
  //4.评论列表页
  .comment {
    //头部-精彩跟帖
    .reply {
      padding: 2.778vw;
      text-align: center;
      font-size: 5vw;
      color: #333;
    }
    //递归父组件
    .btnt {
      padding: 4.167vw 0;
      border-bottom: 0.556vw solid #ccc;
    }
    //更多跟帖
    .more {
      padding: 5.556vw 5.556vw 41.667vw;
      text-align: center;
      font-size: 4.444vw;

      button {
        border: 1px solid #000;
        background: #fff;
        padding: 1.667vw 8.333vw;
        border-radius: 5.556vw;
      }
    }
  }
}
</style>